* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* 添加 box-sizing 以便更好地控制尺寸 */
}

.w {
  width: 1200px;
  margin: auto;
}

body {
  background-color: #f3f5f7;
}

li {
  list-style: none;
}

a {
  text-decoration: none;
}

/* 移除旧的 clearfix，使用现代布局 */
.box {
  margin-top: 30px;
  background-color: orange;
}

.box-hd {
  height: 45px;
  display: flex; /* 使用 flex 布局 */
  justify-content: space-between; /* 左右对齐 */
  align-items: center; /* 垂直居中 */
}

.box-hd h3 {
  font-size: 20px;
  color: #494949;
  margin: 0; /* 移除默认 margin */
}

.box-hd a {
  font-size: 12px;
  color: #a5a5a5;
  margin-right: 30px;
}

/* 使用 flex 布局替换浮动 */
.box-bd ul {
  display: flex; /* 启用 flex 布局 */
  flex-wrap: wrap; /* 允许换行 */
  gap: 15px; /* 使用 gap 替代 margin */
  padding: 0; /* 移除默认 padding */
}

.box-bd ul li {
  position: relative;
  width: 228px;
  height: 270px;
  background-color: #fff;
  transition: all 0.3s;
  /* 移除 float 和 margin */
}

.box-bd ul li a {
  display: block;
  height: 100%; /* 让链接填满整个 li */
}

.box-bd ul li:hover {
  transform: translateY(-8px); /* 使用 transform 替代 top，性能更好 */
  box-shadow: 0 15px 30px rgb(0 0 0 / 10%);
}

.box-bd ul li img {
  width: 100%;
  display: block; /* 移除图片底部间隙 */
}

.box-bd ul li h4 {
  margin: 20px 20px 20px 25px;
  font-size: 14px;
  color: #050505;
  font-weight: 400;
}

.box-bd .info {
  margin: 0 20px 0 25px;
  font-size: 12px;
  color: #999;
}

.box-bd .info span {
  color: #ff7c2d;
}
